<template>
  <div class="fs-5 p-3">贴吧举报管理</div>

  <!-- 数据表格 -->
  <div>
    <NDataTable :loading="loading" :data="list" :columns="columns"></NDataTable>
  </div>

  <!-- 分页信息 -->
  <div>
    <NFlex justify="center">
      <NPagination
        v-model:page="page.pageNumber"
        :page-size="page.pageSize"
        :item-count="page.total"
        @update:page="query"
      ></NPagination>
    </NFlex>
  </div>

  <!-- 删除的对话框 -->
  <div>
    <NModal @after-leave="requery" preset="dialog" v-model:show="aisible" title="帖子删除">
      <div>
        <NInput type="textarea" v-model:value="content1" placeholder="请输入删除理由"></NInput>
      </div>
      <template #action>
        <NButton type="error" @click="aisible = false">关闭</NButton>
        <NButton :loading="loading" type="primary" @click="Delete">确定删除</NButton>
      </template>
    </NModal>
  </div>

  <div>
    <NModal @after-leave="requery" preset="dialog" v-model:show="visible" title="帖子举报原因">
      <div>
        <NDataTable :loading="loading" :data="list1" :columns="columns1"></NDataTable>
      </div>
      <template #action>
        <NButton type="error" @click="visible = false">关闭</NButton>
      </template>
    </NModal>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, h } from 'vue'
import {
  useMessage,
  NDataTable,
  NButton,
  NPagination,
  NFlex,
  NSpace,
  NModal,
  NInput,
} from 'naive-ui'
import { Api } from '@/types/Api'
import { Tools } from '@/types/Tools'
import type { DataTableColumn } from 'naive-ui'
import type { PageBean, PageVO, BaseDataResult, BaseResult } from '@/types/BaseResult'
import type { TbMessage, TbMessageReport } from '@/types/Message'
import { useRouter } from 'vue-router'

const message = useMessage()
const loading = ref(false)
const router = useRouter()

//#region 查看帖子详情
const showxinxi = (mid: number) => {
  router.push(`/message/${mid}`)
}
//#endregion

//#region 查看举报原因
const page1 = ref({ pageNumber: 1, pageSize: 8 } as PageBean)
const list1 = ref([] as Array<TbMessageReport>)
const visible = ref(false)

const showyuanyin = (row: TbMessage) => {
  loading.value = true
  Api.get(
    `/admin/message/${row.mid}/${page.value.pageSize}/${page.value.pageNumber}`,
    {},
    (data: BaseDataResult<PageVO<TbMessageReport>>) => {
      loading.value = false
      if (data.success) {
        list1.value = data.data.list
        page1.value = data.data.pageBean
        visible.value = true
        return
      }
      message.error(data.message)
    },
  )
}

const columns1 = ref([
  {
    title: '举报原因',
    key: 'info',
  },
  {
    title: '	举报时间',
    key: 'created',
    render(row) {
      return Tools.formatDate(row.created as number, 'yyyy-MM-dd hh:mm:ss')
    },
  },
] as DataTableColumn<TbMessageReport>[])

//#endregion

//#region 删除
const aisible = ref(false)
const content1 = ref('')
const content = ref({} as TbMessage)
const showDelete = (row: TbMessage) => {
  aisible.value = true
  content.value = Tools.concatJson(row) as TbMessage
}

const Delete = () => {
  loading.value = false
  Api.delete(
    '/admin/message',
    { mid: content.value.mid, reason: content1.value },
    (data: BaseResult) => {
      if (data.success) {
        aisible.value = false
        message.success('删除成功')
        return
      } else {
        message.error(data.message)
      }
    },
  )
}

//#endregion

//#region 查询
const page = ref({ pageNumber: 1, pageSize: 5 } as PageBean)
const list = ref([] as Array<TbMessage>)

const columns = ref([
  {
    title: '标题',
    key: 'title',
  },
  {
    title: '删除理由',
    key: 'reason',
  },
  {
    title: '发布时间',
    key: 'lastupdate',
    render(row) {
      return Tools.formatDate(row.lastupdate as number, 'yyyy-MM-dd hh:mm:ss')
    },
  },
  {
    title: '状态',
    key: 'deleted',
    render(row) {
      return row.deleted === 'y' ? '已删除' : '等待处理'
    },
  },
  {
    title: '操作',
    key: 'action',
    render(row) {
      return h(NSpace, {}, [
        h(
          NButton,
          {
            size: 'small',
            type: 'primary',
            onClick: () => {
              showxinxi(row.mid)
            },
          },
          '查看帖子信息',
        ),
        h(
          NButton,
          {
            size: 'small',
            type: 'warning',
            onClick: () => {
              showyuanyin(row)
            },
          },
          '查看举报原因',
        ),
        h(
          NButton,
          {
            size: 'small',
            type: 'error',
            onClick: () => {
              showDelete(row)
            },
          },
          '删除',
        ),
      ])
    },
  },
] as DataTableColumn<TbMessage>[])

const requery = () => {
  page.value.pageNumber = 1
  query()
}

const query = () => {
  loading.value = true
  Api.get(
    `/admin/message/${page.value.pageSize}/${page.value.pageNumber}`,
    {},
    (data: BaseDataResult<PageVO<TbMessage>>) => {
      loading.value = false
      if (data.success) {
        list.value = data.data.list
        page.value = data.data.pageBean
        return
      }
      message.error(data.message)
    },
  )
}

onMounted(() => {
  query()
})
//#endregion
</script>

<style scoped lang="scss"></style>
